<template>
   <el-dialog
    v-model="showNameDialog"
    title="修改账号信息"
    width="30%"
  >
    <el-form :model="nameForm" :rules="rules" ref="nameRef" label-width="80px" label-position="right" class="demo-ruleForm">
      <el-form-item label="登录名：" prop="loginName">
        <el-input v-model="nameForm.loginName" placeholder="请输入登录名"></el-input>
      </el-form-item>
      <el-form-item label="昵称：" prop="nickName">
        <el-input v-model="nameForm.nickName"  placeholder="请输入昵称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showNameDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitName">确 定</el-button>
      </span>
    </template>
  </el-dialog>
   <el-dialog
      v-model="showPwdDialog"
      title="修改密码"
      width="30%"
    >
    <el-form :model="passForm" :rules="rules" ref="passRef" label-width="100px" label-position="right" class="demo-ruleForm">
      <el-form-item label="原密码：" prop="oldpass">
        <el-input v-model="passForm.oldpass"  type="password" show-password placeholder="请输入原密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newpass1">
        <el-input v-model="passForm.newpass1" type="password" show-password placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="newpass2">
        <el-input v-model="passForm.newpass2" type="password" show-password placeholder="请确认新密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showPwdDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitPass">确 定</el-button>
      </span>
    </template>
   </el-dialog>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import md5 from 'js-md5'
export default {
  name: 'Account',
  setup() {
    const nameRef = ref(null)
    const passRef = ref(null)

    
    const checkPWD1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (state.passForm.newpass2 && value !== state.passForm.newpass2) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const checkPWD2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认新密码"));
      } else if (state.passForm.newpass1 && value !== state.passForm.newpass1) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const state = reactive({
      user: null,
      showNameDialog:false,
      nameForm: {
        loginName: '',
        nickName: ''
      },
      showPwdDialog:false,
      passForm: {
        oldpass: '',
        newpass1: '',
        newpass2:''
      },
      rules: {
        loginName: [
          { required: 'true', message: '登录名不能为空', trigger: ['change','blur'] }
        ],
        nickName: [
          { required: 'true', message: '昵称不能为空', trigger: ['change','blur'] }
        ],
        oldpass: [
          { required: 'true', message: '原密码不能为空', trigger: ['change','blur'] }
        ],
        newpass1: [
          { required: true, validator:checkPWD1, trigger: 'blur' }
        ],
        newpass2: [
          { required: true, validator:checkPWD2, trigger: 'blur' }
        ]
      },
    })
    onMounted(() => {
      axios.get('/adminUser/').then(res => {
        state.user = res
        state.nameForm.loginName = res.loginUserName
        state.nameForm.nickName = res.nickName
      })
    })
    const submitName = () => {
      nameRef.value.validate((vaild) => {
        if (vaild) {
          axios.put('/adminUser/name', {
            loginUserName: state.nameForm.loginName,
            nickName: state.nameForm.nickName
          }).then(() => {
            state.showNameDialog = false
            ElMessage.success('修改成功')
            window.location.reload()
          })
        }
      })
    }
    const submitPass = () => {
      passRef.value.validate((vaild) => {
        if (vaild) {
          axios.put('/adminUser/password', {
            originalPassword: md5(state.passForm.oldpass),
            newPassword: md5(state.passForm.newpass1)
          }).then(() => {
            state.showPwdDialog = false
            ElMessage.success('修改成功')
            window.location.reload()
          })
        }
      })
    }
    // 打开表单
    const open=(title)=>{
      if (title==="name") {
        state.showNameDialog = true
      }else{
        state.showPwdDialog = true
      }
    }
    return {
      ...toRefs(state),
      nameRef,
      passRef,
      submitName,
      submitPass,
      open
    }
  }
}
</script>

<style>
  .account-container {
    margin-bottom: 20px;
  }
</style>